<template>
	<view class="container">
		<view class="tui-order-header">
			<view class="tui-header-content">
				<view>
					<view class="tui-status-text">{{ getStatusText }}</view>
					<!-- <view class="tui-reason"> -->
					<!-- <text class="tui-reason-text">{{ getReason(status) }}</text> -->
					<!-- <tui-countdown
							:time="1800"
							color="rgba(254,254,254,0.75)"
							colonColor="rgba(254,254,254,0.75)"
							borderColor="transparent"
							backgroundColor="transparent"
							v-if="status === 1"
						></tui-countdown> -->
					<!-- </view> -->
				</view>
				<image :src="getImg()" class="tui-status-img" mode="widthFix"></image>
			</view>
		</view>
		<template v-if="orderInfo.address != '自提'">
			<!-- <tui-list-cell backgroundColor="#fefefe" @click="logistics">
				<view class="tui-flex-box">
					<image :src="webURL + 'img_order_logistics3x.png'" class="tui-icon-img"></image>
					<view class="tui-logistics">
						<view class="tui-logistics-text">快递已到收货点，请注意查收哦! 投递员: echo. 联系电话: 17788849992</view>
						<view class="tui-logistics-time">2019-06-03 12:02</view>
					</view>
				</view>
			</tui-list-cell> -->
			<tui-list-cell unlined :hover="false">
				<view class="tui-flex-box">
					<image :src="webURL + 'img_order_address3x.png'" class="tui-icon-img"></image>
					<view class="tui-addr">
						<view class="tui-addr-userinfo">
							{{orderInfo.consignee}}
							<text class="tui-addr-tel">{{orderInfo.mobile}}</text>
						</view>
						<view class="tui-addr-text">{{address}}</view>
					</view>
				</view>
			</tui-list-cell>
		</template>
		<template v-else>
			<tui-list-cell unlined :hover="false">
				<view class="tui-flex-box">【到店自提】</view>
			</tui-list-cell>
		</template>
		<view class="tui-order-item">
			<tui-list-cell :hover="false" :lineLeft="false">
				<view class="tui-goods-title">商品信息</view>
			</tui-list-cell>
			<block v-for="(item, index) in orderGoods" :key="item.id">
				<tui-list-cell padding="0">
					<view class="tui-goods-item">
						<image :src="item.imageUrl" class="tui-goods-img"></image>
						<view class="tui-goods-center">
							<view class="tui-goods-name">{{ item.goodsName?item.goodsName:''}}</view>
							<view class="tui-goods-attr">{{ item.attribute?item.attribute:''}}</view>
						</view>
						<view class="tui-price-right">
							<view>￥{{ item.marketPrice }}元</view>
							<view>x{{ item.number }}</view>
						</view>
					</view>
				</tui-list-cell>
			</block>
			<view class="tui-goods-info">
				<view class="tui-price-flex tui-size24">
					<view>商品总额</view>
					<view>￥{{ orderInfo.goodsPrice }}元</view>
				</view>
				<!-- <view class="tui-price-flex  tui-size24">
					<view>优惠券</view>
					<view>￥0.00</view>
				</view> -->
				<view class="tui-price-flex  tui-size24" v-if="orderInfo.address != '自提'">
					<view>配送费</view>
					<view>￥{{ orderInfo.freightPrice }}元</view>
				</view>
				<view class="tui-price-flex tui-size32 tui-pbtm20">
					<view class="tui-flex-shrink">合计</view>
					<view class="tui-goods-price">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{ orderInfo.orderPrice }}元</view>
						<!-- <view class="tui-size-24">.00</view> -->
					</view>
				</view>
				<view class="tui-price-flex tui-size32">
					<view class="tui-flex-shrink">实付款</view>
					<view class="tui-goods-price tui-primary-color">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{ orderInfo.actualPrice }}元</view>
						<!-- <view class="tui-size-24">.00</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="tui-order-info">
			<tui-list-cell :hover="false">
				<view class="tui-order-title">订单信息</view>
			</tui-list-cell>
			<view class="tui-order-content">
				<view class="tui-order-flex">
					<view class="tui-item-title">订单号:</view>
					<view class="tui-item-content">{{ orderInfo.orderSn }}</view>
				</view>
				<view class="tui-order-flex" v-if="orderInfo.address != '自提'">
					<view class="tui-item-title">物流单号:</view>
					<view class="tui-item-content">33655511251265578556</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">创建时间:</view>
					<view class="tui-item-content">{{ orderInfo.createTime }}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">付款时间:</view>
					<view class="tui-item-content">{{ orderInfo.payStatus == 0 ? '未付款' : orderInfo.payTime?orderInfo.paytime:'无'}}</view>
				</view>
				<!-- <view class="tui-order-flex">
					<view class="tui-item-title">发货时间:</view>
					<view class="tui-item-content">2019-05-27 10:20</view>
				</view> -->
				<view class="tui-order-flex">
					<view class="tui-item-title">配送方式:</view>
					<view class="tui-item-content" v-if="orderInfo.address != '自提'">快递</view>
					<view class="tui-item-content" v-else>自取</view>
				</view>
				<view class="tui-order-flex" v-if="orderInfo.address != '自提'">
					<view class="tui-item-title">运费:</view>
					<view class="tui-item-content">￥{{ orderInfo.freightPrice }}元</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">订单备注:</view>
					<view class="tui-item-content">{{ orderInfo.postscript }}</view>
				</view>
			</view>
		</view>
		<view class="tui-safe-area"></view>
		<view class="tui-tabbar tui-order-btn" v-if="orderInfo.payStatus == 0 && orderInfo.orderStatus >= 0">
			<view class="tui-btn-ml" style="margin-right:30rpx;" v-if="orderInfo.payStatus == 0 && (orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1)"
			 @tap.stop="cancelOrders(orderInfo.id)">
				<tui-button type="black" plain width="152rpx" height="56rpx" :size="26" shape="circle">取消订单</tui-button>
			</view>
			<view class="tui-btn-mr">
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="btnPay">立即支付</tui-button>
			</view>
		</view>
		<!-- <t-pay-way :show="show" @close="popupClose"></t-pay-way> -->
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	import {
		handleWXPay
	} from '@/utils';
	import tPayWay from '@/components/t-pay-way/ti-pay-way';
	import tuiButton from '@/components/tui-button/tui-button.vue';
	import tuiListCell from '@/components/tui-list-cell/tui-list-cell.vue';
	import tuiCountdown from '@/components/tui-countdown/tui-countdown.vue';
	export default {
		components: {
			tPayWay,
			tuiCountdown,
			tuiListCell,
			tuiButton
		},
		data() {
			return {
				webURL: 'https://www.thorui.cn/wx/static/images/mall/order/',
				//1-待付款 2-付款成功 3-待收货 4-订单已完成 5-交易关闭
				// status: 1,
				show: false,
				orderInfo: {},
				orderGoods: []
			};
		},
		onLoad({
			orderId
		}) {
			console.log('orderId', orderId)
			if (orderId) {
				this.orderDetail({
					orderId
				}).then(res => {
					this.orderInfo = res.data.orderInfo;
					this.orderGoods = res.data.orderGoods;
				});
			}
		},
		onShareAppMessage(res) {
			let referrer = uni.getStorageSync('referrer');
			console.log('referrer', referrer);
			if (referrer) {
				return {
					title: '恒鲜惠美食在线',
					path: '/pages/menu/menu?referrer=' + referrer,
					imageUrl: require('static/images/menu/banner.jpeg')
				}
			}
		},
		computed: {
			address() {
				let provinceName = this.orderInfo.provinceName || '';
				let cityName = this.orderInfo.cityName || '';
				let areaName = this.orderInfo.areaName || '';
				let communityName = this.orderInfo.communityName || '';
				let address = this.orderInfo.address || '';
				return provinceName + cityName + areaName + communityName + address;
			},
			getStatusText() {
				/* if (this.orderInfo.payStatus == 0) {
					if (this.orderInfo.orderStatus == -1) {
						return '订单已取消';
					} else {
						return '等待您付款';
					}
				} else {
					if (this.orderInfo.orderStatus == 0) {
						return '待分配';
					} else if (this.orderInfo.orderStatus == 1) {
						return '已分配';
					} else if (this.orderInfo.orderStatus == 10) {
						return '订单已完成';
					} else if (this.orderInfo.orderStatus == -1) {
						return '已取消';
					} else if (this.orderInfo.orderStatus == -2) {
						return '退款';
					} else if (this.orderInfo.orderStatus == -3) {
						return '退货退款';
					} else if (this.orderInfo.orderStatus == -5) {
						return '已删除';
					}
				} */
				if (this.orderInfo.payStatus == 2) {
					if (this.orderInfo.orderStatus == 10 && this.orderInfo.shippingStatus == 2) {
						return '订单已完成';
					} else if (this.orderInfo.orderStatus == 1 && this.orderInfo.shippingStatus == 0) {
						return '订单待发货';
					} else if (this.orderInfo.orderStatus == 1 && this.orderInfo.shippingStatus == 1) {
						return '订单待收货'
					}

				} else if (this.orderInfo.payStatus == 0) {
					if (this.orderInfo.orderStatus == -10 && this.orderInfo.shippingStatus == 0) {
						return '订单已取消'
					}
					if (this.orderInfo.orderStatus == 0 && this.orderInfo.shippingStatus == 0) {
						return '订单待付款'
					}
				}
			}
		},
		methods: {
			...mapActions(['orderDetail', 'prepay', 'cancelOrder']),
			getImg() {
				return this.webURL + 'img_order_payment3x.png';
			},
			logistics() {
				this.tui.href('/pages/extend/timeaxis/timeaxis?page=mall');
			},
			btnPay() {
				this.show = true;
				const {
					orderId
				} = this.$mp.page.options;
				this.prepay({
					orderId
				}).then(order => {
					handleWXPay(order.data).then(payRes => {
						if (payRes.errMsg == 'requestPayment:ok') {
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 1000
							});
						} else {
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								mask: true,
								duration: 1000
							});
						}
						setTimeout(() => {
							this.orderDetail({
								orderId
							}).then(res => {
								this.orderInfo = res.data.orderInfo;
								this.orderGoods = res.data.orderGoods;
							});
						}, 1000);
					});
				});
			},
			cancelOrders(id) {
				uni
					.showModal({
						title: '提示',
						content: '确定要取消订单吗?'
					})
					.then(([err, suc]) => {
						if (suc.confirm) {
							this.cancelOrder({
								orderId: id
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '订单取消成功',
										icon: 'success',
										mask: true,
										duration: 1500,
										success: () => {
											setTimeout(function() {
												uni.reLaunch({
													url: '/pages/myOrder/myOrder'
												});
											}, 1500)
										}
									})

								}

							});
						}
					});
			}
			// popupClose() {
			// 	this.show = false;
			// }
		}
	};
</script>

<style>
	.container {
		padding-bottom: 118rpx;
	}

	.tui-order-header {
		width: 100%;
		height: 160rpx;
		position: relative;
		background-color: #eb0909;
	}

	.tui-img-bg {
		width: 100%;
		height: 160rpx;
	}

	.tui-header-content {
		width: 100%;
		height: 160rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 70rpx;
		box-sizing: border-box;
	}

	.tui-status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #fefefe;
	}

	.tui-reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.tui-reason-text {
		padding-right: 12rpx;
	}

	.tui-status-img {
		width: 80rpx;
		height: 80rpx;
		display: block;
	}

	.tui-flex-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-icon-img {
		width: 44rpx;
		height: 44rpx;
		flex-shrink: 0;
	}

	.tui-logistics {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 24rpx 0 20rpx;
		box-sizing: border-box;
	}

	.tui-logistics-text {
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-logistics-time {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 16rpx;
		color: #666;
	}

	.tui-addr {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.tui-addr-userinfo {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: bold;
	}

	.tui-addr-text {
		font-size: 24rpx;
		line-height: 32rpx;
		padding-top: 16rpx;
	}

	.tui-addr-tel {
		padding-left: 40rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
		background: url(../../static/images/menu/default-memu-pic.png) no-repeat;
		background-size: 180rpx 180rpx;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-color-red {
		color: #e41f19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 24rpx;
	}

	.tui-size-24 {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-price-large {
		font-size: 32rpx;
		line-height: 30rpx;
	}

	.tui-goods-info {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-price-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-size24 {
		padding-bottom: 20rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #888;
	}

	.tui-size32 {
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: 500;
	}

	.tui-pbtm20 {
		padding-bottom: 20rpx;
	}

	.tui-flex-shrink {
		flex-shrink: 0;
	}

	.tui-primary-color {
		color: #eb0909;
	}

	.tui-order-info {
		margin-top: 20rpx;
	}

	.tui-order-title {
		position: relative;
		font-size: 28rpx;
		line-height: 28rpx;
		padding-left: 12rpx;
		box-sizing: border-box;
	}

	.tui-order-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		border-left: 4rpx solid #eb0909;
		height: 100%;
	}

	.tui-order-content {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.tui-order-flex {
		display: flex;
		padding-top: 18rpx;
	}

	.tui-order-flex:first-child {
		padding-top: 0;
	}

	.tui-item-title {
		width: 132rpx;
		flex-shrink: 0;
	}

	.tui-item-content {
		color: #666;
		line-height: 32rpx;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.tui-btn-mr {
		margin-right: 30rpx;
	}
</style>
